<template>
  <div class="instance">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>流程实例管理</span>
        </div>
      </template>

      <!-- 搜索表单 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="流程名称">
          <el-input v-model="searchForm.processName" placeholder="请输入流程名称" clearable />
        </el-form-item>
        <el-form-item label="发起人">
          <el-input v-model="searchForm.creator" placeholder="请输入发起人" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="运行中" value="running" />
            <el-option label="已完成" value="completed" />
            <el-option label="已终止" value="terminated" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 实例列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="processName" label="流程名称" />
        <el-table-column prop="businessKey" label="业务标识" />
        <el-table-column prop="creator" label="发起人" />
        <el-table-column prop="createTime" label="发起时间" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleView(row)">查看</el-button>
            <el-button
              v-if="row.status === 'running'"
              type="danger"
              link
              @click="handleTerminate(row)"
            >
              终止
            </el-button>
            <el-button type="info" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 搜索表单
const searchForm = reactive({
  processName: '',
  creator: '',
  status: '',
})

// 表格数据
const tableData = ref([
  {
    processName: '请假流程',
    businessKey: 'LEAVE-2024-001',
    creator: '张三',
    createTime: '2024-01-15 10:00:00',
    status: 'running',
  },
  // 更多数据...
])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 获取状态标签类型
const getStatusType = (status: string) => {
  const map: Record<string, string> = {
    running: 'primary',
    completed: 'success',
    terminated: 'danger',
  }
  return map[status] || 'info'
}

// 获取状态标签文本
const getStatusLabel = (status: string) => {
  const map: Record<string, string> = {
    running: '运行中',
    completed: '已完成',
    terminated: '已终止',
  }
  return map[status] || status
}

// 搜索
const handleSearch = () => {
  // 实现搜索逻辑
}

// 重置搜索
const resetSearch = () => {
  searchForm.processName = ''
  searchForm.creator = ''
  searchForm.status = ''
}

// 查看实例
const handleView = (row: any) => {
  // 实现查看逻辑
}

// 终止实例
const handleTerminate = (row: any) => {
  ElMessageBox.confirm('确认终止该流程实例吗？', '提示', {
    type: 'warning',
  })
    .then(() => {
      // 实现终止逻辑
      ElMessage.success('终止成功')
    })
    .catch(() => {})
}

// 删除实例
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确认删除该流程实例吗？', '提示', {
    type: 'warning',
  })
    .then(() => {
      // 实现删除逻辑
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped>
.instance {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
